<template>
  <div>
      <!-- 导航条的引入 -->
     <navgitar
      title='我的关注'     
      ></navgitar>
      <!-- 循环体的结构布局 -->
      <div v-if='userinfo.length>0'>
          <div class="user_item" v-for='(value,index) in userinfo' :key='index.id'>
          <img v-if='value.head_img' :src="$axios.defaults.baseURL + value.head_img" alt="">
          <img v-else src="../assets/xixi.png" alt="">
          <div class="user_info">
              <div>{{value.nickname}}</div>
              <span class="date">{{moment(value.create_date).format('YYYY-MM-DD')}}</span>
          </div>
          <span class="cancle" @click="canclefoucs(value.id)">取消关注</span>
      </div>
      </div>
      <div v-else>你还没有关注的用户</div>
  </div>
</template>
<script>
import navgitar from '../components/navgitar'
import moment from 'moment'
export default {
    data(){
        return {
            userinfo:[],
            moment
        }
    },
    components:{
        navgitar
    },
    mounted(){
    this.jzsj()
    },
    methods:{
        //封装加载页面时候，获取到的关注
        jzsj(){
    this.$axios({
            url:'/user_follows',
                headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
        }).then((res)=>{
            // console.log(res);
            const {data} =res.data;
            this.userinfo=data;
        })
        },
        canclefoucs(id){
            if(confirm('确定要取消关注这个用户吗')){
                       this.$axios({
                 url:'/user_unfollow/'+id,
                  headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        }
              }).then((res)=>{
                  console.log(res);
                  if(res.data.message=='取消关注成功'){
                     this.jzsj()
                  }
              })
            } 
        }
    }
}
</script>

<style lang='less' scoped>
.user_item{
    display: flex;
    padding: 20/360*100vw;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid #eee;
    img {
        width: 40/360*100vw;
        height: 40/360*100vw;
        border-radius: 50%;
        display: block;
    }
    .user_info{
        flex: 1;
        margin-left: 20/360*100vw;
        font-size: 16px;
        .date{
            color:rgba(0, 0, 0, 0.537254901960784);
             font-size: 14px;
        }
    }
    .cancle{
        display: block;
        width: 73/360*100vw;
        height: 37/360*100vw;
        font-size: 12px;
        background-color: rgba(153, 153, 153, 0.2);
        color: #363636;
        line-height:37/360*100vw ;
        text-align: center;
        border-radius: 50px;
    }
}

</style>